import React, { useState, useEffect } from 'react';
import { Button, Avatar, Dropdown, Space, Typography, message } from 'antd';
import { useLocation, useRoutes } from 'react-router-dom'
import { RouterList } from './routers'
import {
	UserOutlined,
	LogoutOutlined,
	HomeOutlined,
	ProjectOutlined,
	TeamOutlined,
	FileTextOutlined,
	BarChartOutlined,
	SettingOutlined
} from '@ant-design/icons';
import './index.css';
import { useNavigate } from 'react-router-dom';
const { Text } = Typography;
interface UserInfo {
	id: string;
	name: string;
	email: string;
	role: string;
	role_name: string;
	avatar?: string;
}
const App: React.FC = () => {
	const navigate = useNavigate();
	const { pathname } = useLocation();
	// 是否是登录注册页
	const isAuthPage = ['/login', '/register'].includes(pathname);
	// 是否是首页
	const isAuthHome = ['/'].includes(pathname)
	// console.log('isAuthHome', isAuthHome)
	const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
	const [isLoggedIn, setIsLoggedIn] = useState(false);
	useEffect(() => {
		checkLoginStatus();
	}, [pathname]);
	const checkLoginStatus = () => {
		const token = localStorage.getItem('token');
		const userData = localStorage.getItem('userinfo');
		if (token && userData) {
			const user = JSON.parse(userData);
			setUserInfo(user);
			setIsLoggedIn(true);
		}
	};
	const handleLogout = () => {
		localStorage.clear()
		setUserInfo(null);
		setIsLoggedIn(false);
		message.success('已退出登录');
	};

	const userDropdown = [
		{
			key: '1',
			label: (
				<Space>
					<UserOutlined />
					<span>个人中心</span>
				</Space>
			),
		},
		{
			key: '2',
			label: (
				<Space>
					<LogoutOutlined />
					<span>退出登录</span>
				</Space>
			),
			onClick: handleLogout
		}
	];

	const navItems = [
		{ key: 'home', icon: <HomeOutlined />, label: '首页', path: '/', auth: true },
		{ key: 'project', icon: <ProjectOutlined />, label: '项目管理', path: '/project', auth: true },
		{ key: 'team', icon: <TeamOutlined />, label: '团队协作', path: '/team', auth: true },
		{ key: 'docs', icon: <FileTextOutlined />, label: '文档管理', path: '/docs', auth: true },
		{ key: 'data', icon: <BarChartOutlined />, label: '数据分析', path: '/data', auth: true },
		{
			key: 'system',
			icon: <SettingOutlined />,
			label: '系统管理',
			path: '/system',
			// 只有超级管理员可以访问所有
			auth: userInfo?.role === 'super_admin'
		}
	];
	const handleNavClick = (path: string, auth: boolean) => {
		if (!auth) {
			message.warning('您没有权限访问此页面');
			return;
		}
		navigate(path);
	};
	return (
		<>
			{useRoutes(RouterList)}
			{!isAuthPage && (
				<div className="app-container">
					<header className="app-header">
						<div className="nav">
							<nav className="main-nav">
								{navItems.map(item => (
									<Button
										key={item.key}
										className='nav-button'
										icon={item.icon}
										onClick={() => handleNavClick(item.path, item.auth)}
										disabled={!isLoggedIn && item.key !== 'home'}
									>
										{item.label}
									</Button>
								))}
							</nav>
						</div>
						<div className="user-info-container">
							{isLoggedIn && userInfo ? (
								<Dropdown menu={{ items: userDropdown }} placement="bottomRight">
									<Space className="user-info">
										<Avatar
											size="default"
											icon={<UserOutlined />}
											src={userInfo.avatar}
											className="user-avatar"
										/>
										<div className="user-details">
											<Text strong className="user-name">{userInfo?.name}</Text>
											<Text type="secondary" className="user-role">{userInfo?.role_name}</Text>
										</div>
									</Space>
								</Dropdown>
							) : (
								<div className="login-prompt">
									<Button type="primary" className="login-btn" onClick={() => navigate('/login')}>
										请先登录
									</Button>
								</div>
							)}
						</div>
					</header>
					{/* 这里有问题 Container容器的渲染问题 */}
					<div className='app-main' style={{
						display: isAuthHome ? 'block' : 'none',
						minHeight: isAuthHome ? '100%' : '0',
						width: '100%'
					}}>
						<h1 style={{ textAlign: 'center' }}>欢迎使用</h1>
						{userInfo && (
							<div className="user-info-display">
								<div className="user-profile-card">
									<div className="profile-header">
										<Avatar
											size={64}
											src={userInfo.avatar}
											icon={<UserOutlined />}
											className="profile-avatar"
										/>
										<div className="profile-details">
											<h2 className="user-name">{userInfo.name}</h2>
											<p className="user-email">{userInfo.email}</p>
											<span className="user-role-badge">{userInfo.role_name}</span>
										</div>
									</div>

									<div className="profile-stats">
										<div className="stat-item">
											<span className="stat-label">用户ID</span>
											<span className="stat-value">{userInfo.id}</span>
										</div>
										<div className="stat-item">
											<span className="stat-label">角色</span>
											<span className="stat-value">{userInfo.role}</span>
										</div>
										<div className="stat-item">
											<span className="stat-label">状态</span>
											<span className="stat-value status-active">已激活</span>
										</div>
									</div>

									<div className="profile-actions">
										<Button type="primary" icon={<UserOutlined />}>
											编辑资料
										</Button>
										<Button icon={<SettingOutlined />}>
											账户设置
										</Button>
									</div>
								</div>
							</div>
						)}
					</div>
					<div id='Container' style={{
						display: isAuthHome ? 'none' : 'block',
						minHeight: isAuthHome ? '' : '100%',
						width: '100%'
					}}></div>
				</div >
			)}
		</>
	);
};

export default App;